<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./demo/fontawesome/fontawesome.min.css">
<link rel="stylesheet" href="./demo/fontawesome/all.min.css">
<link rel="stylesheet" href="./demo/demo.css">
<title>Torque demo</title>
</head>
<body>

<div id="container">
    <div id="side-bar">
        <div id="status-button" @click="toggleEngineStatus">
            <i :class="'fas ' + (engineStatus? 'fa-pause': 'fa-play')"></i>
        </div>
        <div class="info-field">
            <div class="title">指针位置</div>
            <div class="value">({{position.x}}, {{position.y}})</div>
        </div>
        <div class="info-field">
            <div class="title">FPS</div>
            <div class="value">{{fps}}</div>
        </div>
        <div class="info-field">
            <div class="title">刚体数目</div>
            <div class="value">{{bodyNumber}}</div>
        </div>

        <ul id="action-bar">
            <li 
            v-for="(item, index) in actionsListIcon" 
            @click="selectAction(item, index)"
            :class="index === selectedActionIndex? 'action--active': ''"
            >
                <i :class="'fas fa-' + item"></i>
            </li>
        </ul>

        <div id="body-info-container" v-if="showBodyInfo">
            <div class="info-field" v-for="(item, index) in selectedBodyInfo">
                <div class="title">{{item.title}}</div>
                <div class="value">{{item.value}}</div>
            </div>

            <i class="fas fa-trash" @click="removeBody"></i>
        </div>
        <div v-else id="world-select-container">
            <select id="examples" v-model="curWorldIndex">
                <option :value="index" v-for="(item, index) in examples">{{item[0]}}</option>
            </select>

            <i class="fas fa-redo-alt" @click="refreshWorld"></i>
        </div>
    </div>

    <div id="stage" @mousemove="updatePosition" @click="stageClick">
        <div id="canvas"></div>
    </div>
</div>

<script src="./demo/vue.js"></script>
<script src="./dist/torque.js"></script>
<script src="./lib/pixi.js"></script>
<script src="./lib/renderer.js"></script>
<script src="./demo/examples/basic.js"></script>
<script src="./demo/examples/stack.js"></script>
<script src="./demo/examples/kinetic.js"></script>
<script src="./demo/examples/composite.js"></script>
<script src="./demo//examples/stress.js"></script>
<script src="./demo/examples/weightless.js"></script>
<script src="./demo/examples/concave.js"></script>
<script src="./demo/examples/joint.js"></script>
<script src="./demo/examples/rope.js"></script>
<script src="./demo/examples/cloth.js"></script>
<script src="./demo/demo.js"></script>
</body>
</html>